<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>apple watch</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/watch.css">	
</head>

<body>
	<div class="container-fluid">
		<div class="row justify-content-end">
			<div class="col-lg-4 position-fixed border-right leftCon">
				<!-- 导航栏 -->
				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
					<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
					<ul class="nav mr-auto">
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">门店</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
						</li>
					</ul>
					<span class="iconfont icon-menu" id="showBtn"></span>
				</header>

				<!-- 标题与登录注册 -->
				<div class="d-flex align-items-center login">
					<div id="txt">
						<h2>星巴克移动应用</h2><br>
						<a href="mobileapp.html" id="title1"><h3>星巴克移动应用</h3></a><br>
						<a href="apple watch.html" id="title1"><h3>星巴克Apple Watch</h3></a>
					</div>
				</div>

				<!-- 点击菜单后要展示的内容 -->
				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
						<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
						<span class="iconfont icon-guanbi" id="closeBtn"></span>
					</header>
					<div class="list">
						<ul class="list-unstyled mx-sm-5 pl-sm-5">
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
							<hr>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
							<hr>
						</ul>	
					</div>
				</div>

			</div>
		</div>
	</div>
    

	<div style="position: relative;">
    <div style="overflow: scroll;overflow-x: hidden; position: relative;" id="scroll">
        <img id="img1"><br>
        <img id="img2">
    </div>

    <img src="images/apple-watch.gif" style="position: absolute;" id="watch">
    <a href="https://apps.apple.com/cn/app/xing-ba-ke-zhong-guo/id499819758?ls=1"><img src="images/ios.png" id="ios-down"></a>
    <p id="title">美妙咖啡随时相伴</p>
    <div id="introduce">现在您可以在您的Apple Watch上打开星巴克移动应用，使用
    <a href="https://www.starbucks.com.cn/account/starbucks-rewards" id="vip">星享俱乐部会员</a>功能，以及查<br>找附近门店。</div>
    
    <img src="images/watch1.png" id="watch1">
    <div id="title2">积星享好礼</div><br>
    <div id="content2">随时关注您的星享俱乐部好礼，扫一扫我的二维<br>码累积星星兑换好礼。</div>

    <img src="images/watch2.png" id="watch2">
    <div id="title3">移动支付</div><br>
    <div id="content3">扫一扫星礼卡完成支付，查看卡内余额，Apple <br>Watch轻松搞定。</div>

    <img src="images/watch3.png" id="watch3">
    <div id="title4">查找门店</div><br>
    <div id="content4">快速发现离您最近的星巴克门店，为您指引路线<br>并显示所需时间。</div>

    <hr id="hr">
    <div id="content5">为了能正常使用，请确认您IPhone中的<a href="https://apps.apple.com/cn/app/xing-ba-ke-zhong-guo/id499819758?ls=1" id="link">星巴克移动应用</a>
        版本为4.1.8或以上。苹果公司标志及<br>
        IPhone是苹果公司在美国及其他国家的注册商标。Apple Watch是苹果公司的注册商标，苹果应<br>
        用商店是苹果公司的服务商标。</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<script>
		$('#showBtn').on('click',function(){
			$('.menu').removeClass('hide').addClass('show');
			shadowMenu();
		});
		$('#closeBtn').on('click',function(){
			$('.menu').removeClass('show').addClass('hide');
			shadowMenu();
		});

	
	</script>
</body>
</html>